@(developer: String,timelogForm: Form[models.TimeLog])

@import helper._
@main(""){

<style>
	div.timebox{
		display: table-cell;
		padding-right: 5px;
		vertical-align: middle;}

</style>

<div class="alert alert-success" role="success">
  <a href="#" class="alert-link">Welcome @developer </a>
</div>

@helper.form(routes.Application.submitTimecard(), 'name->"@developer") {
	
	@select(field = timelogForm("PTO"),options = Seq("0"->"No", "1"->"Half Day PTO", "2"->"Whole Day PTO"))

<!--  	
		<script type="text/javascript">
			function PTOChange() {
				var $inputs = $("#worktimediv input");
				if ($("#PTO").val() == "2") {
					$inputs.attr("disabled", true);
				} else {
					$inputs.attr("disabled", false);
				}
			}
			$(function() {
				$("#PTO").change(PTOChange);
				PTOChange();
			});
		</script>
-->	
	 <hr/><div class="label label-primary">Work duration</div>
	<div id="worktimediv" style="display: table-row;">
        <div class="timebox">From:</div>
            <div class="timebox">
			  <div id="worktimepicker1" class="input-append date">
			    <input name="startworktime"  data-format="dd/MM/yyyy hh:mm" type="text"></input>
			    <span class="add-on">
			      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
			      </i>
			    </span>
			  </div>
			</div>
        
        
        
        <div class="timebox">To:</div>
            <div class="timebox">
			  <div id="worktimepicker2" class="input-append date"">
			    <input name="endworktime"  data-format="dd/MM/yyyy hh:mm" type="text"></input>
			    <span class="add-on">
			      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
			      </i>
			    </span>
			  </div>
       </div> 
       
    </div>
    
     <br/><br/><hr/><div class="label label-primary">Break duration</div>
    <div style="display: table-row;">

        <div class="timebox">From:</div>
            <div class="timebox">
			  <div id="datetimepicker1" class="input-append date">
			    <input name="startbreaktime"  data-format="dd/MM/yyyy hh:mm" type="text"></input>
			    <span class="add-on">
			      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
			      </i>
			    </span>
			  </div>
			</div>
        
        
        
        <div class="timebox">To:</div>
            <div class="timebox">
			  <div id="datetimepicker1" class="input-append date"">
			    <input name="endbreaktime"  data-format="dd/MM/yyyy hh:mm" type="text"></input>
			    <span class="add-on">
			      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
			      </i>
			    </span>
			  </div>
       </div> 
       
    </div>
        
    <br/><br/><hr/><div class="label label-primary">OT duration</div> 
    <div style="display: table-row;">

        <div class="timebox">From:</div>
            <div class="timebox">
			  <div id="datetimepicker1" class="input-append date">
			    <input name="startottime"  data-format="dd/MM/yyyy hh:mm" type="text"></input>
			    <span class="add-on">
			      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
			      </i>
			    </span>
			  </div>
			</div>
        
        
        
        <div class="timebox">To:</div>
            <div class="timebox">
			  <div id="datetimepicker1" class="input-append date"">
			    <input name="endottime"  data-format="dd/MM/yyyy hh:mm" type="text"></input>
			    <span class="add-on">
			      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
			      </i>
			    </span>
			  </div>
 
        <script type="text/javascript">
			$("[id*='timepicker']").datetimepicker({
				language : 'en',
				pickSeconds : true
			});

			var todayTimeStamp = +new Date; // Unix timestamp in milliseconds
			var oneDayTimeStamp = 1000 * 60 * 60 * 24; // Milliseconds in a day
			var diff = todayTimeStamp - oneDayTimeStamp;
			var yesterdayDate = new Date(diff);
			var start = new Date(yesterdayDate
					.getFullYear(), yesterdayDate
					.getMonth() , yesterdayDate
					.getDate(), 8, 0);
			var end = new Date(yesterdayDate
					.getFullYear(), yesterdayDate
					.getMonth() , yesterdayDate
					.getDate(), 18, 0)

			var picker1 = $("#worktimepicker1").data(
					'datetimepicker');
			picker1.setLocalDate(start);
			var picker2 = $("#worktimepicker2").data(
					'datetimepicker');
			picker2.setLocalDate(end);
		</script>
       </div> 
       
    </div>
    

       
            <div>
                <button id='submitTime' type="submit" class="btn">Submit</button>
            </div>
       
               <script type="text/javascript">
																$(
																		"[id*='timepicker']")
																		.datetimepicker(
																				{
																					language : 'en'
																				});
															</script>
	}     
	<a stype="text-align: right"  href="/report">Browse submit history</a>
	
}